import HomeScreen from "./HomeScreen";
import WidgetsScreen from "./WidgetsScreen";
import { settings, box } from "./settings";
import { isPortrait, toastText } from "./signals";
import { useEffect } from "preact/hooks";

const HomePage = () => (
  <div class="carousel-item block *:m-auto *:text-center">
    <HomeScreen />
  </div>
);

const WidgetPage = () => (
  <div class="carousel-item h-full">
    <div
      class={`h-max w-full ${isPortrait.value ? "flex flex-col place-items-center" : "block columns-2"}`}
    >
      <div style={{ paddingTop: `${settings.value.widget.top}dvh` }} />
      <WidgetsScreen />
    </div>
  </div>
);

const App = () => {
  useEffect(() => {
    box.style.opacity = 1;
  }, []);

  return (
    <>
      {settings.value.widget.enabled ? (
        <div class="carousel carousel-end h-screen w-(--screen-w) overflow-y-hidden *:w-full *:overflow-y-scroll">
          <HomePage />
          <WidgetPage />
        </div>
      ) : (
        <div class="w-(--screen-w) *:w-full">
          <HomeScreen />
        </div>
      )}
      <div class="toast">
        {toastText.value === "" ? (
          void 0
        ) : (
          <div class="alert alert-info">
            <span>{toastText}</span>
          </div>
        )}
      </div>
    </>
  );
};

export default App;
